<script lang="ts" setup>
import type { MeetingVO } from '#/api/meeting/model';

import { onMounted, ref } from 'vue';

import { AutoComplete } from 'ant-design-vue';
import { debounce } from 'lodash-es';

import { meetingList } from '#/api/meeting';

// interface Props {
//   modelName?: 'id' | 'name';
// }
//
// const props = withDefaults(defineProps<Props>(), {
//   modelName: 'name',
// });

const emit = defineEmits(['blur', 'change', 'select']);
const loading = ref(false);
const list = ref<any[]>([]);
const modelValue = defineModel<string>('value', {
  default: () => undefined,
});

onMounted(async () => {
  //
});

const getList = debounce(async (name: string) => {
  if (!name) return;
  list.value = [];
  loading.value = true;

  const results = (await meetingList({ name })) ?? [];
  list.value = results.map((item: MeetingVO) => {
    return { label: item.name, value: item.id };
  });
  loading.value = false;
}, 300);

async function handleSearch(val: string) {
  if (!val) return;
  console.log(val);
  await getList(val);
}

async function handleChange(val: any) {
  console.log(val);
  emit('change', modelValue.value);
}

async function handleSelect(val: any) {
  console.log(val);
  emit('select', val);
}
</script>
<template>
  <AutoComplete
    v-model:value="modelValue"
    class="w-full"
    placeholder="请输入或从搜索列表中选择"
    :options="list"
    @blur="emit('blur')"
    @change="handleChange"
    @search="handleSearch"
    @select="handleSelect"
  />
</template>
